<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Icon Pie Chart (2)</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Icon Pie Chart (2)</p>
<hr class="separator">
<div class="content">
<img src="images/iconpie2.png" width='560' height='300'>
<br><br>
This example extends the <a href="iconpie.htm">Icon Pie Chart (1)</a> example to demonstrate using <a href="cdml.htm">CDML</a> to include multiple fonts and colors in chart title, sector labels and to draw logo. It also demonstrates silver background color, rounded corners, and glass shading effect for title.<br><br>
<ul><li> The silver background is achieved by using <a href="Chart.silverColor.htm">Chart.silverColor</a> to create the silver color, then use it in <a href="PieChart.PieChart.htm">PieChart.PieChart</a> as the chart background color.<br><br>
<li> The rounded frame is configured using <a href="BaseChart.setRoundedFrame.htm">BaseChart.setRoundedFrame</a>.<br><br>
<li> The title containing multiple fonts and colors is written in <a href="cdml.htm">CDML</a> and added to the chart using <a href="BaseChart.addTitle.htm">BaseChart.addTitle</a>.<br><br>
<li> The glass shading effect of the title is defined using <a href="Chart.glassEffect.htm">Chart.glassEffect</a>, then applied to the title using <a href="Box.setBackground.htm">Box.setBackground</a> of the title <a href="TextBox.htm">TextBox</a> object.<br><br>
<li> The logo designed using <a href="cdml.htm">CDML</a> is added to the chart as another title using <a href="BaseChart.addTitle2.htm">BaseChart.addTitle2</a> with <a href="Chart.BottomRight.htm">BottomRight</a> alignment.<br><br>
<li> The icons file names for sector labels are added to the chart as an extra field using <a href="BaseChart.addExtraField.htm">BaseChart.addExtraField</a>.<br><br>
<li> The sector label format string is specified using <a href="cdml.htm">CDML</a> and <a href="paramsub.htm">Parameter Substitution and Formatting</a> as:<br><br>
<div class="codeblock"><code>&lt;*block,<wbr>valign=<wbr>absmiddle*&gt;&lt;*img=<wbr>{field0}*&gt; {label} ({percent|0}%)</code></div><br>
This means that the sector label is a block, which contains an image, followed by the sector name and percentage. The image file is taken from the extra field.<br><br>
<li> The format string is applied to the chart using <a href="PieChart.setLabelFormat.htm">PieChart.setLabelFormat</a>.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/iconpie2.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The data for the pie chart
double[] data = {28, 45, 5, 1, 12};

// The labels for the pie chart
String[] labels = {"Excellent", "Good", "Bad", "Very Bad", "Neutral"};

// The icons for the sectors
String[] icons = {"laugh.png", "smile.png", "sad.png", "angry.png", "nocomment.png"};

// Create a PieChart object of size 560 x 300 pixels, with a silver background, black border, 1
// pxiel 3D border effect and rounded corners
PieChart c = new PieChart(560, 300, Chart.silverColor(), 0x000000, 1);
c.setRoundedFrame();

//Set search path to current JSP directory for loading icon images
c.setSearchPath(getServletConfig().getServletContext(), request);

// Set the center of the pie at (280, 150) and the radius to 120 pixels
c.setPieSize(280, 150, 120);

// Add a title box with title written in CDML, on a sky blue (A0C8FF) background with glass effect
c.addTitle(
    "&lt;*block,valign=absmiddle*&gt;&lt;*img=doc.png*&gt; Customer Survey: &lt;*font=Times New Roman " +
    "Italic,color=000000*&gt;Do you like our &lt;*font,color=dd0000*&gt;Hyper&lt;*super*&gt;TM&lt;*/font*&gt; " +
    "molecules?", "Times New Roman Bold Italic", 15, 0x000080).setBackground(0xa0c8ff, 0x000000,
    Chart.glassEffect());

// Add a logo to the chart written in CDML as the bottom title aligned to the bottom right
c.addTitle2(Chart.BottomRight,
    "&lt;*block,valign=absmiddle*&gt;&lt;*img=molecule.png*&gt; &lt;*block*&gt;&lt;*color=FF*&gt;&lt;*font=Times New Roman " +
    "Bold Italic,size=12*&gt;Molecular Engineering\n&lt;*font=Arial,size=10*&gt;Creating better molecules");

// Set the pie data and the pie labels
c.setData(data, labels);

// Set 3D style
c.set3D();

// Use the side label layout method
c.setLabelLayout(Chart.SideLayout);

// Set the label background color to transparent
c.setLabelStyle().setBackground(Chart.Transparent);

// Add icons to the chart as a custom field
c.addExtraField(icons);

// Configure the sector labels using CDML to include the icon images
c.setLabelFormat("&lt;*block,valign=absmiddle*&gt;&lt;*img={field0}*&gt; {label} ({percent|0}%)");

// Explode the 3rd and 4th sectors as a group (index = 2 and 3)
c.setExplodeGroup(2, 3);

// Set the start angle to 135 degrees may improve layout when there are many small sectors at the
// end of the data array (that is, data sorted in descending order). It is because this makes the
// small sectors position near the horizontal axis, where the text label has the least tendency to
// overlap. For data sorted in ascending order, a start angle of 45 degrees can be used instead.
c.setStartAngle(135);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "", "title='{label}: {value} responses ({percent}%)'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Icon Pie Chart (2)&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Icon Pie Chart (2)
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
